<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>File对象</title>
	</head>
	<body>
		<input type="file" id="file">
		<button onclick="readToTxt()">读取为txt</button>
		<button onclick="readToByte()">读取为二进制</button>
		<button onclick="readToImg()">读取为图像</button>
		<pre id="result" name="result"></pre>
	</body>
</html>

<script type="text/javascript">
	/* http://localhost/download/Tools/redis/redis.windows.conf */

	var result = document.getElementById("result");

	function readToTxt() {
		var file = document.getElementById("file").files[0];
		var reader = new FileReader();
		reader.readAsText(file);
		reader.onload = function(f) {
			result.innerHTML = this.result;
		}
		reader.onprogress = function(f) {
			console.log(f)
		}
	}

	function readToByte() {
		var file = document.getElementById("file").files[0];
		var reader = new FileReader();
		//将文件以二进制形式读入页面  
		reader.readAsBinaryString(file);
		reader.οnlοad = function(f) {
			var result = document.getElementById("result");
			//显示文件  
			result.innerHTML = this.result;
		}
	}

	function readToImg() {
		var file = document.getElementById("file").files[0];
		let reader = new FileReader();
		reader.readAsDataURL(file);
		reader.onload = function(f) {
			result.innerHTML = "<img src='" + this.result + "'>"
		}
	}
</script>
